<template>
    <div class="benefits"> 
         <div class="list">
            <div class="item" 
                v-for="(item, index) in benefits" 
                :key="'bs'+index"
                :class="'item'+index"
            >
                <div class="title">
                    <p>{{ item.title }}</p>
                    <p class="sub" :style="`color:${item.subtitleColor}`">{{ item.viceTitle.substring(1,item.viceTitle.length-1)}}</p>
                </div>
                <div class="img">
                    <img :src="item.image" alt="" srcset="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:[
        "benefits"
    ]
}
</script>

<style lang="less" scoped>
    .benefits{
        width: 100%;
        .list{
            display: grid;
            grid-template-rows: repeat(3,auto);
            grid-template-columns: repeat(6,1fr);
            border-top: 1PX solid @99;
            border-bottom:1PX solid @99;
            margin-top: 10px;
            text-align: center;
            .item{
                font-size: 30px;
                .sub{
                    font-size: 24px;
                }
            }
            .item0{
            grid-column-start: 1;
            grid-column-end: 4;
            grid-row-start: 1;
            grid-row-end: 3;
            border-bottom:1PX solid @99;
            border-right: 1PX solid @99;
            position: relative;
            .title{
                margin-top: 30px;
                height: 80px;
            }
            .img{
                position: absolute;
                top: 110px;  
                bottom: 0px;
                width: 100%;
                img{
                    height: 100%;
                }
            }
            }
            .item1,.item2{
                grid-column-start: 4;
                grid-column-end: 7;
                border-bottom:1PX solid @99;
                text-align: left;
                .title{
                    width: 70%;
                    display: inline-block;
                    vertical-align: middle;
                    text-align: center;
                }
                .img{
                    width: 30%;
                    display: inline-block;
                    vertical-align: middle;
                    font-size: 0px;
                    margin: 26px 0px;
                    img{
                        width: 100%;
                        box-sizing: border-box;
                        // padding: 0px 10px;
                    }
                }
            }
            .item3,.item4,.item5{
                grid-row-start: 3;
                grid-row-end: 4;
                border-right: 1PX solid @99;
                .title{
                    margin-top: 12px;
                }
                .img{
                    width: 100%;
                    padding: 0px 50px;
                    box-sizing: border-box;
                    img{
                        width: 100%;
                    }
                }
            }
            .item3{
                grid-column-start: 1;
                grid-column-end:3;
            }
            .item4{
                grid-column-start: 3;
                grid-column-end:5;
            }
            .item5{
                grid-column-start: 5;
                grid-column-end:7;
                border-right: none;
            }
            }
    }
</style>
